<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <title>Document</title>
    
    <link rel="stylesheet" href="./style.css">
    <style>
        p{
            color: green;
            font-size: 50px;
        }
    </style>
</head>

<body>
    <!-- 
        网页分为 
        结构 HTML
        表现 CSS 
        行为 JavaScript

        CSS 层叠样式表
        网页实际上是一个多层的结构，通过CSS可以分别为网页的每一个层设置样式而最终我们看到的指示网页的最上面一层
        设置网页元素的样式


        
     -->



    <!-- 
         使用CSS 修改元素样式
         第一种方式 内联样式 行内样式
         在标签内部通过 style属性来设置元素的样式
           问题:样式值对一个标签生效，如果希望影响多个元素需要每一个元素中都复制一遍，当样式发生变化时，需要一个个修改
           注意：开发时，绝对不要使用内联样式


           第二种方式 内部样式表 
           将样式编写在head里的style标签里
           问题：内部样式只能对一个网页起作用，不能跨页面进行服用

           第三种方式 外部样式表 最贱实践
           将CSS样式编写在一个外部的CSS文件里
           然后通过link标签来引入外部CSS文件
           可以使用到浏览器的缓存机制，从而加快网页的速度，增强用户体验
           
      -->
    <p style="color: red;font-size: 60px;">少小离家老大回，乡音未改鬓毛衰</p>
    <p style="color: red;font-size: 60px;">今天天气真不错</p>

    <p>哈哈哈哈哈</p>


</body>

</html>